<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>会员注册</title>
<link rel="stylesheet" href="assets/plugins/mobiscroll/css/mobiscroll.custom-2.16.1.min.css">
<script type="text/javascript" src="assets/plugins/mobiscroll/js/mobiscroll.custom-2.16.1.min.js"></script>
<script type="text/javascript">
	var timeout = null,second = 60,i=0;
	var $datepicker = $("#birthday");
	$datepicker.mobiscroll().date({
		lang:"zh",
    	display:"bottom",
    	dateFormat:"yy-mm-dd",
    	dateOrder:"yymmdd",
    	yearSuffix:"年",
    	monthSuffix:"月",
    	daySuffix:"日",
    });
	var regPhone = /^\d{11}$/;
	$(".app-verify-btn").on("click",function(){
		var phone = $("#phoneNo").val();
        if (!phone) {
            Comm.msg("请输入手机号码");
            return;
        }
        if (phone && (!regPhone.test(phone) || phone.length != 11)) {
        	Comm.msg("手机号码输入错误");
            return;
        }
		var $btn = $(this),$help = $(".am-verify-help");
		$btn.attr("disabled","disabled");
		$help.removeClass("am-hide");
		timeout = setInterval(function() {
			if(second-i<0){
				clearInterval(timeout);
				$help.addClass("am-hide");
				$btn.removeAttr("disabled");
				$("span",$help).html(second);
				i=0;
			} else {
				$("span",$help).html(second-i);
				i++;
			}
		},1000);
		
		$.ajax({
			type : 'POST',
            url: "identifycode/create",
            dataType: "json",
            data:"phone="+phone+"&action=reg",
            success: function (data) {
                if (data && data.success) {
                	Comm.msg("验证码已经通过短信发送，请查收");
                	$("#identifyCodeId").val(data.params.identifyCodeId);
                } else {
                	getCodeFail();
                }
            },
            error: function (ret) {
            	getCodeFail();
            }
        });
	});
	
	var getCodeFail = function () {
		var $btn = $(".app-verify-btn"),$help = $(".am-verify-help");
		clearInterval(timeout);
		$help.addClass("am-hide");
		$btn.removeAttr("disabled");
		$("span",$help).html(second);
		i=0;
		Comm.msg("验证码发送失败,请重新获取");
    };
    
    $("#submit-btn").on("click",function(){
    	var name = $("#name").val();
        if (!name) {
        	Comm.msg("请输入姓名");
            return;
        }
		var phone = $("#phoneNo").val();
        if (!phone) {
        	Comm.msg("请输入手机号码");
            return;
        }
        var identifyCodeId = $("#identifyCodeId").val();
        if (!identifyCodeId) {
        	Comm.msg("请先获取验证码");
            return;
        }
        var verifyCode = $("#verifyCode").val();
        if (!verifyCode) {
        	Comm.msg("请输入验证码");
            return;
        }
        var birthday = $("#birthday").val();
        if (!birthday) {
        	Comm.msg("请选择生日");
            return;
        }
		var $btn = $(this);
		$btn.attr("disabled","disabled").text("正在提交...");
		//$("form").submit();
		
		$.ajax({
			type : 'POST',
            url: "${ctx}/weixin/vip/save",
            dataType: "json",
            data:$('form').serialize(),
            success: function (data) {
            	$btn.prop("disabled",false).text("提交");
            	Comm.msg(data.msg);
                if (data.success) {
                	var backUrl = $('#backUrl').val();
                	if(backUrl==''||backUrl==null){
                		window.location.href="${ctx}/weixin/vip/vipCard";
                	}else{
                		window.location.href=backUrl;
                	}
                }
            },
            error: function () {
            	Comm.msg("注册失败，请重试");
            	$btn.prop("disabled",false).text("提交");
            }
        });
	});
    var today = new Date();
    var now = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0);
    //修改浏览器历史的url地址
    if(window.location.href.indexOf('#forward')<0)
    	window.history.replaceState('forward', null, window.location.href+'#forward');
    else
    	window.location.href="${ctx}/weixin/vip/vipCard";
</script>
</head>

<body>
	<h2 class="app-title">请填写会员信息</h2>
	<div class="am-g am-margin-top">
		<div class="am-u-sm-12">
			<form class="am-form am-form-horizontal" id="form">
			<input type="hidden" name="backUrl" id="backUrl" value="${backUrl}">
			<input type="hidden" name="identifyCodeId" id="identifyCodeId">
				<div class="am-form-group">
					<div class="am-u-sm-12">
						<input type="text" placeholder="请输入真实姓名" id="name" name="name" maxlength="10">
					</div>
				</div>
				<div class="am-form-group am-padding-horizontal">
					<label class="am-radio-inline">
						<input type="radio" name="sex" value="M" data-am-ucheck checked="checked"> 男
					</label>
					<label class="am-radio-inline">
						<input type="radio" name="sex" value="F" data-am-ucheck> 女
					</label>
				</div>
				<div class="am-form-group">
					<div class="am-u-sm-12">
						<input type="text" placeholder="请选择生日" id="birthday" name="birthday" readonly>
					</div>
				</div>
				<div class="am-form-group">
					<div class="am-u-sm-12">
						<input type="number" placeholder="请输入手机号码" id="phoneNo" name="phoneNo" maxlength="11">
						<p class="am-form-help">注：已是会员的顾客请填写预留的手机号</p>
					</div>
				</div>
				<div class="am-form-group">
					<div class="am-u-sm-6">
						<input type="number" placeholder="请输入验证码" id="verifyCode" name="verifyCode">
					</div>
					<div class="am-u-sm-6">
						<button class="am-btn am-btn-landiao am-radius am-btn-block app-verify-btn" type="button">获取验证码</button>
					</div>
					<div class="am-u-sm-12">
						<p class="am-form-help am-verify-help am-hide">验证码已发送，若要重新获取验证码，请等待<span>60</span>秒</p>&nbsp;
					</div>
				</div>
				<div class="am-form-group">
					<div class="am-u-sm-6">
						<button id="submit-btn" class="am-btn am-btn-landiao am-radius am-btn-block" type="button">提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>
